<!--
<template>
<Menu :mode="mode" :theme="theme" :active-name="ActiveName" :open-names="OepnNames" @on-select="selectModule" ref="Menu">
    <template v-for="item in getModules(ParentID)">
            <Menu-item v-if="!item.HasChildren" :name="item.ModuleID">
                <Icon :type="item.Icon"></Icon>
                {{item.Name}}
            </Menu-item>
            <Submenu v-else :name="item.ModuleID">
                <template slot="title">
                    <Icon :type="item.Icon"></Icon>
                    {{item.Name}}
</template>
                <Menu-item v-for="child in getModules(item.ModuleID)" :name="child.ModuleID" v-bind:key="child.ModuleID">{{child.Name}}</Menu-item>

            </Submenu>
        </template>
    </Menu>
</template>
-->
<script>
import UserInfo from '../libs/user-info.js';
import UserModule from '../libs/user-module.js';
export default {
    props: ['theme', 'mode', 'type', 'parentId', 'current','accordion'],
    data: function() {
        return {
            Type: this.type ? Number(this.type) : 0,
            ParentID: this.parentId ? Number(this.parentId) : 0,
            MenuItems: [],
            ActiveName: this.current,
            OepnNames: []
        }
    },
    render: function(h) {
        var menuItem = [];
        var self = this;

        function FillMenuItem(parentId) {
            var result=[];
            var modules = self.getModules(parentId);
            modules.map(function(item) {
                if (!item.HasChildren) {
                    result.push(
                        h('Menu-item', {
                            props: {
                                name: item.ModuleID
                            }
                        }, [
                            h('Icon', {
                                props: {
                                    type: item.Icon
                                }
                            }),
                            h('span', item.Name)
                        ])
                    );
                } else {
                    var child = [];
                    child.push(h('template', {
                        slot: 'title'
                    }, [
                        h('Icon', {
                            props: {
                                type: item.Icon
                            }
                        }),
                        h('span', item.Name)
                    ]));
                   child= child.concat(FillMenuItem(item.ModuleID));

                    result.push(
                        h('Submenu', {
                            props: {
                                name: item.ModuleID
                            }
                        }, child)
                    );

                }
            });
            return result;
        }

        menuItem = FillMenuItem(this.ParentID);


        return h('Menu', {
            props: {
                mode: this.mode,
                theme: this.theme,
                activeName: this.ActiveName,
                openNames: this.OepnNames,
                accordion:this.accordion
            },
            ref:'Menu',
            on: {
                'on-select': this.selectModule
            }
        }, menuItem);
    },
    watch: {
        parentId: function(val, oldVal) {
            // console.log(val, oldVal);

            this.ParentID = val;
            var self = this;
            var TargetModule = UserModule.FindTargetModule(val);

            switch (this.Type) {
                case 1:
                    if (TargetModule) {

                    }
                    break;
                case 2:
                    if (TargetModule) {
                        var currentModule = UserModule.FindLastModuleByIsShowInMenu(TargetModule.ModuleID, 2);
                        if(currentModule){
                            this.selectModule(currentModule.ModuleID);
                            var ParentIDs = UserModule.GetParentIds(currentModule.ModuleID);
                            this.OepnNames = ParentIDs;
                        }else{
                            this.selectModule(TargetModule.ModuleID);
                        }
                    }

                    break;
                case 3:
                    if (TargetModule) {

                        this.selectModule(TargetModule.ModuleID);
                        var ParentIDs = UserModule.GetParentIds(TargetModule.ModuleID);
                        this.OepnNames = ParentIDs;
                    }
                    break;
            }
            this.$nextTick(function() {
                if (this.$refs.Menu && this.ActiveName && this.ActiveName > 0) {
                    this.$refs.Menu.updateActiveName();
                }
                if (this.$refs.Menu && this.OepnNames && this.OepnNames.length > 0) {
                    this.$refs.Menu.updateOpened();
                }


            })

        },
        current: function(val, oldVal) {
            this.ActiveName = val;

            this.$nextTick(function() {
                if (this.$refs.Menu && this.ActiveName && this.ActiveName > 0) {
                    this.$refs.Menu.updateActiveName();
                }
                if (this.$refs.Menu && this.OepnNames && this.OepnNames.length > 0) {
                    this.$refs.Menu.updateOpened();
                }


            })
        }
    },

    created: function() {
        var self = this;
        // console.log(this.theme, this.mode, this.parentId, this.type);
        this.getTopMenuItems();

    },
    methods: {
        getTopMenuItems: function() {
            var UserModules = UserInfo.getUserModule();
            var MenuItems = UserModules.filter(function(item) {
                if (item.IsShowInMenu == this.Type) {
                    return true;
                }
            }.bind(this));

            MenuItems.map(function(item) {
                item.HasChildren = false;
                if (item.IsParent == 1) {
                    for (var k in UserModules) {
                        if (UserModules[k].ParentID == item.ModuleID && UserModules[k].IsShowInMenu == this.Type) {
                            item.HasChildren = true;
                            break;
                        }
                    }

                }

            }.bind(this));
            this.MenuItems = MenuItems;

            return MenuItems;

        },
        getModules: function(parentId) {

            var array = [];
            for (var i = 0; i < this.MenuItems.length; i++) {

                if (this.MenuItems[i].ParentID === parentId) {
                    array.push(this.MenuItems[i]);
                }
            }

            return array;
        },

        selectModule: function(ModuleID) {
            this.ActiveName = ModuleID;
            this.$emit('on-select', ModuleID);
            if (this.Type === 3 && !this.$store.state.isPageLoading) {
                var TargetModule = UserModule.FindTargetModule(ModuleID);
                this.$router.push(TargetModule.URL);
            }
        }

    }
}
</script>
